<style lang="scss">
  @import "../../styles/base";

  page {
    background-color: #f5f5f5;
  }

  .container {
    position: relative;
  }

  .result-icon {
    display: block;
    margin: pxToRem(355) auto pxToRem(160);
    width: pxToRem(402);
    height: pxToRem(511);
  }

  .tip {
    padding-bottom: pxToRem(40);
    font-size: pxToRem(50);
    color: #1E1E1E;
    text-align: center;
  }

  .name {
    display: block;
    margin-left: pxToRem(280);
    border: pxToRem(2) solid #7D7D7D;
    background-color: #ffff;
    position: absolute;
    width: pxToRem(569);
    height: pxToRem(100);
    line-height: pxToRem(100);
    font-size: pxToRem(50);
    border-radius: pxToRem(50);
    color: #1E1E1E;
    text-align: center;
  }

  .btn-next {
    @include middle-center-x(fixed);
    bottom: pxToRem(130);
    width: pxToRem(890);
    height: pxToRem(118);
  }
</style>
<template>
  <div class="container">
    <img class="result-icon" src="https://image.watsons.com.cn//upload/b75919c9.jpg">
    <div class="tip">重命名:</div>
    <input v-model="name" class="name">
    <img @click="toConfig" class="btn-next" src="/static/img/config-success/btn-next.png">
  </div>
</template>

<script>

  export default {
    data() {
      return {
        isIphoneX: /iPhone X/.test(App.systemInfo.model),
        isIos: /iOS/.test(App.systemInfo.system),
        name: '德尔玛加湿器',
      }
    },
    components: {},
    methods: {
      async toConfig() {
        if (!this.name) {
          wx.showToast({
            title: '请输入设备名称',
            icon: 'none'
          })
          return false;
        }
        wx.request({
          method: 'PUT',
          url: '/app/bindings/' + App.currentDevice.did,
          data: {
            dev_alias: this.name
          },
          header: {
            'X-Gizwits-User-token': App.userInfo.token,
          }
        })
        wx.redirectTo({ url: '/pages/device-list/main' })
      },
    },
    onHide() {
    },
    async onShow() {
      //if(App.currentDevice){
      //
      //}
    },
  }
</script>
